main{
    width: 0, 80%, 20%;
    margin-left: 0;
    display: flex;
    justify-content: center;
    max-width: 70vw;
}
.text{
    text-indent: 1em;
    width: 60%;
    margin: 30px;
}

blockquote {
    font-style: italic;
    margin: 0.25em 0;
    padding: 0.35em 40px;
    line-height: 1.45;
    position: relative;
}

blockquote:before {
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 60px;
    position: absolute;
    left: -20px;
    top: -20px;
}

header{
    width: 0, 80%, 20%;
    margin: 5em;
    text-align: left;
    padding-right: 1em;
 }

.side-menu {
    width: 180px;
    text-align: center;
}
.side-menu>p {
    margin-top: 0%;
    font-size: 0.7em;
    justify-self:start;
}

.side-menu>img{
    max-width: 100%;
}

.side-menu>a{
    overflow: auto;
    white-space: pre;
    padding: .5em;
}

.aside {
    display: inline;
    float: right;
    position: relative;
    width: 20vw;
    padding: 1%;
    margin-right: -22vw;
    font-size: 15px;
    clear: right;
    } 

    @media (max-width: 1200px) { /* for mobile margin notes */
        .aside {
            float: right;
            text-align: left;
    
            width: 100%;
            margin: .5rem 0;
        }
        main{
            max-width: unset;
        }
        } 
	

/* Sidenote counter */
body {
    counter-reset: aside-counter;
}
.aside-number {
    counter-increment: aside-counter;
}
/* Counter before the sidenote in the margin. */
.aside::before {
    content: counter(aside-counter)".";
    position: relative;
    vertical-align: baseline;
    font-size: 0.9em;
    font-weight: bold;
    padding: 1em;
}
/* Counter in the main body. */
.aside-number::after {
    content: counter(aside-counter);
    vertical-align: super;
    font-size: 0.7em;
    font-weight: bold;
    margin-right: 0.5rem;
}

@media (min-width: 1200px) {
    /* Highlight the sidenote when mouse hovers on the sidenote number in body. */
    .aside-number:hover .aside {
        background-color: rgb(0, 0, 0);
        transition: .2s;
    }
}

a{
    color: rgb(70, 49, 9);
    text-decoration: wavy;
    font-weight: bold;
}
a:hover {
    font-style: italic;
}

table{
    padding:1em 
}

.inprog{
    background-color: rgba(0, 0, 255, 0.226);
    display: flex;
    border-radius: 1em;
    align-items: center;
    }

.inprog, img {
position: relative;
bottom: 1em;    
}

img#click {cursor: pointer;}
a {cursor: pointer;}

html{
        background-color: rgba(61, 35, 0, 0.123);

}